<template>
    <view class="page" v-if="inited">
        <view v-if="isPrivate" class='module'>
            <view class='row'>
                <text>设备号</text>
                <view class='pull-right'><text user-select>{{order.deviceId}}</text> {{ PORT_NAME[order.port] }}</view>
            </view>
        </view>
        <view v-else class='module'>
            <view class='row'>
                <text>订单号</text>
                <view class='pull-right'>
                    <text user-select>{{order.orderNo}}</text>
                    <nut-tag class="m-l-10" :type="status(order.status)">{{ CHARGE_ORDER_STATUS[order.status] }}</nut-tag>
                </view>
            </view>
            <view class='row' v-if="order.status == 3 && order.failReason">
                <text>失败原因</text>
                <view class='pull-right'>{{ order.failReason }}</view>
            </view>
            <view class='row'>
                <text>设备号</text>
                <view class='pull-right'><text user-select>{{order.deviceId}}</text> {{ PORT_NAME[order.port] }} {{ CHARGE_TYPE[order.device.chargeType] }}</view>
            </view>
        </view>
        <view class='module m-t-20'>
            <view class='row'>
                <text>开始</text>
                <text class='pull-right'>{{ parseTime(order.createTime) }}</text>
            </view>
            <view class='row'>
                <text>结束时间</text>
                <text class='pull-right'>{{ parseTime(order.endTime) }}</text>
            </view>

            <view class='row'>
                <text>预充</text>
                <text class='pull-right'>
                    {{ order.precharge }}
                    <template v-if="order.feeType == 0">小时</template>
                    <template v-else-if="order.feeType == 1">度</template>
                    <template v-else>元</template>
                </text>
            </view>
        
            <template v-if="order.status == 2">
                <view class='row'>
                    <text>实际充电耗电</text>
                    <text class='pull-right'>{{ order.consumeKwh }}度</text>
                </view>
                <view class='row'>
                    <text>实际充电时长</text>
                    <text class='pull-right'>{{ formatChargeTime(order.chargeData.time) }}</text>
                </view>
                <view v-if="!isPrivate" class='row'>
                    <text>实际支付金额</text>
                    <text class='pull-right'>{{ order.consumeAmount }}元</text>
                </view>
                <view class='row'>
                    <text>停止原因</text>
                    <text class='pull-right'>{{ order.stopReason }}</text>
                </view>
            </template>
        </view>

        <view v-if="!isShowPower" class="m-t-60 text-center f-32">
            <text class="color-primary" @tap="queryData">点击查看功率数据</text>
        </view>

        <template v-if="isShowPower">
            <template v-if="powerTimes.length > 0">
                <template v-for="(item, index) in powerDatas" :key="index">
                    <view class='module m-t-20'>
                        <view class="chartTitle">{{ item.name }}</view>
                        <view class="m-t-20 chart">
                            <Chart :id="'powerChart' + index" :name="item.name" :category='powerTimes' :data="item.data" />
                        </view>
                    </view>
                </template>
            </template>
            <view v-else class="m-t-60 text-center f-32">无功率信息</view>
        </template>
    </view>



    <LoadingPage v-if="!inited"  />
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { detailApi, paramsApi } from '@/api/ChargeOrder';
    import { detailApi as privateChargeDetailApi, powerDataApi } from '@/api/PrivateChargeRecord';
    import { CHARGE_TYPE, PORT_NAME, CHARGE_ORDER_STATUS } from '@/constant';
    import { formatChargeTime, parseTime } from '@/utils';
    import LoadingPage from '@/components/LoadingPage/index.vue'
    import Chart from './Chart.vue'
    import { hideLoading, showLoading, useRouter } from '@/utils/framework';

    
    function status(s) {
        if(s == 0) {
            return ''
        }

        if(s == 1) {
            return 'primary'
        }
        if(s == 2) {
            return 'success'
        }

        if(s == 3) {
            return 'danger'
        }


    }
    
    

    const router = useRouter()
    const id = Number(router.params.id)
    const isPrivate = router.params.private == '1'


    const inited = ref(false)
    

    const order = ref<any>()

    if(isPrivate) {
        privateChargeDetailApi(id).then(res => {
            if(res.data) {
                order.value = res.data
            }

            inited.value = true
        })
    }else {
        detailApi(id).then(res => {
            if(res.data) {
                order.value = res.data
            }

            inited.value = true
        })
    }

    


    const isShowPower = ref(false)
    const powerTimes = ref<string[]>([])
    const powerDatas = ref<any[]>([
        {
            name : '电流/A',
            data : []
        },

        {
            name : '电压/V',
            data : []
        },

        {
            name : '功率/W',
            data : []
        }
    ])

    const pageSize = 60

    function queryData() {
        showLoading()
        getPowerData(1)
    }

    async function getPowerData(pageNo:number) {
        const res = isPrivate ? (await powerDataApi(id, pageNo, pageSize)) : (await paramsApi(id, pageNo, pageSize))
        if(res.data) {
            res.data.forEach(item => {
                powerTimes.value.push(parseTime(item.t, '{h}:{i}') as string)
                powerDatas.value[0].data.push(Number(item.c))
                powerDatas.value[1].data.push(Number(item.v))
                powerDatas.value[2].data.push(Number(item.p))
            })
        }

        if(!res.data || (res.data.length < pageSize)) { //请求完了
            hideLoading()
            isShowPower.value = true
        }else {
            getPowerData(pageNo + 1)
        }
    }
</script>

<style lang="scss" src="./index.scss"></style>